<template>
	<!--添加保养计划-->
	<el-dialog :visible.sync="isShow" @close="close" width="70%" class="addUpKeepDialog" :show-close='false' :closeOnClickModal='false'
	 append-to-body>
		<span slot="title" class="dialog-title">
		  	保养记录
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-form label-width="80px" :inline="false" class="demo-form-inline form" :model="form" :rules="rules" ref="upKeepAddForm">


			<el-form-item label="仪器:" prop="equipmentId">
				<el-cascader :options="assEquipment" :props="propsEquipment" v-model="form.equipmentId" size="mini" style="width:100%" filterable clearable>
				</el-cascader>
				<!--<el-input size="mini" v-model="form.equipment" placeholder="仪器名称"></el-input>-->

			</el-form-item>
			<el-form-item label="负责人:" prop="executor">
				<el-select filterable v-model="form.executor" placeholder="请选择"  size='mini' style="display: block;">
					<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">

					</el-option>
				</el-select>
			</el-form-item>
      <el-form-item label="保养日期:" prop="executeDate">
          <el-date-picker v-model="form.executeDate"  type="date"  placeholder="选择日期" size="mini" style="width:100%"
          :clearable="false" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
          </el-date-picker>
			</el-form-item>
		</el-form>
		<div class="elTab">
			<el-tabs style="width: 100%;">
				<el-tab-pane label="保养项">
					<el-button type="primary" size="mini" @click="addbyx" style="float:right;margin-bottom:10px;">添加</el-button>
					<el-table :data="form.itemBeans" class="tableCon" size='mini' style="width: 100%; height:calc(100% - 40px)">
						<el-table-column type="index" label="序号" width="50">
						</el-table-column>
						<el-table-column prop="content" min-width="100" label="保养项">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.content"></el-input>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="mini" @click="deletebyx(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button class="penalButton" type="primary" size="mini" @click="submit(0)" :disabled="!isRepeat">确定</el-button>
			<el-button class="penalButton" size="mini" @click="close">取消</el-button>
	  </span>

	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'

	export default {

		props: {
			flag: String,
			equipmentId: String,//仪器id
			upKeepEditData: Object
		},
		components: {
		},
		data() {
			return {
				isShow: true,
				selectItemData: [],
				keeper: [],
				form: {
					equipment: null,
					equipmentId:[],
					executeDate: this.util.date(),
					itemBeans:[],
					executor:'',

				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					},
				},
				rules: {
					equipmentId: [{ required: true, message: '请选则仪器', trigger: 'change' },],
					executor: [{ required: true, type: 'string', message: '请选择负责人', trigger: 'change' }],
				},
				isRepeat:true,
				assEquipment: [], //辅助仪器信息
				propsEquipment: { //辅助仪器继承的值
					label: 'name',
					value: 'id',
					children: 'children'

				},
			}
		},
		created() {

		},
		mounted() {
				this.getEquip();
		},
		computed: {
			...mapState(['EmployeeByLabs'])
		},
		methods: {
			close() {
				this.form = {
					equipment: '',
					equipmentId:[],
					executeDate: this.util.date(),
					itemBeans:[],
					executor:'',
				};
				// this.$parent.upKeepEditData = {}
				this.$parent.upKeepShow = false;
				this.isRepeat = true;
			},

			addbyx() {
				this.form.itemBeans.push({ content: '' })
			},
			deletebyx(index) {
				this.form.itemBeans.splice(index, 1)
			},
			// /getTypeAndEquip.htm
			getEquip(){
				this.$http({
					apiUrl: '/resource/getTypeAndEquip.htm',
					method: 'post',
				}).then(res => {
					if (res.code == 0) {
						this.assEquipment = res.data;

					}
				})
			},
			submit(submitType) {

				this.$refs.upKeepAddForm.validate((valid) => {
					if (valid) {

						// this.form.executor = this.keeper.join(',');
            if(this.form.equipmentId.length == 0){
              this.$notify({
              	title:"警告",
              	message:"请选择仪器!",
              	type:"warning"
              })
              return;
            }

						if(this.form.itemBeans.length == 0){
							this.$notify({
								title:"警告",
								message:"请至少添加一个保养项!",
								type:"warning"
							})
							return;
						}
						for(var i in this.form.itemBeans){
							if(this.form.itemBeans[i].content == ''){
								this.$notify({
									title:"警告",
									message:"请输入保养项!",
									type:"warning"
								})
								return;
							}
						}
            this.form.equipment = JSON.parse(JSON.stringify(this.form.equipmentId[this.form.equipmentId.length - 1]));
						delete this.form.equipmentId
            this.form.executeDate = JSON.parse(JSON.stringify(this.form.executeDate + " 00:00:00"))
						this.isRepeat = false;
						this.$http({
							apiUrl: '/resource/addMaintrecordItem.htm',
							method: 'post',
							params: this.form,
						}).then(res => {
							this.isRepeat = true;
							if (res.code == 0) {
								this.close()
								this.$notify({
									showClose: true,
									message: '保存成功!',
									type: 'success',
									title:"成功",
								})
							}
						})
					} else {
						this.isRepeat = true;
						return false
					}
				})
			}
		}
	}

</script>
<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.addUpKeepDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.addUpKeepDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}

	.addUpKeepDialog .form {
		height: 90px;
	}

	.addUpKeepDialog .form .el-form-item {
		margin-bottom: 15px;
		width: 49%;
		display: inline-block;
	}

	.addUpKeepDialog .el-dialog .elTab {
		clear: both;
		height: calc(100% - 90px)
	}

	.addUpKeepDialog .el-dialog .elTab .el-tabs {
		height: 100%
	}

	.addUpKeepDialog .el-dialog .elTab .el-tabs .el-tabs__content {
		height: calc(100% - 40px)
	}

	.addUpKeepDialog .el-dialog .elTab .el-tabs .el-tabs__content .el-tab-pane {
		height: 100%
	}
</style>
